<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>添加商品页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{style/admin.css}" media="all">
    <!--<link rel="stylesheet" th:href="@{/style/admin.css}" media="all">-->
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.min.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
    <script type="text/javascript" th:src="@{/laydate/laydate.js}"></script>
    <style type="text/css">
        .product-price {
            width: 50px;
            border: none;
        }

        #editor {
            margin-left: 120px;
        }

        .one-img {
            /*border: 1px solid red;*/
            height: 100px;
            width: 100px;
            margin-left: 110px;
        }

        .Fengetext {
            color: red;
        }

        .layui-card-header .layui-icon {
            line-height: initial;
            position: absolute;
            right: 0px;
            top: 50%;
            margin-top: -15px;
        }

        .upaction {
            background: red;
        }

        blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
            margin: 0;
            padding: 1px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-container"></div>
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <form name="form" class="form">
                        <label class="layui-form-label">商品类别</label>
                        <div class="layui-input-block">
                            <div class="layui-input-inline">
                                <select name="quiz1" id="yj" lay-verify="required" lay-filter="selectyj">
                                    <option value="0">请选择分类</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="quiz2" id="rj" lay-filter="selectrj">
                                </select>
                            </div>
                            <!--<div class="layui-input-inline" >-->
                            <!--<select name="quiz3" id="sj" lay-filter="selectsj">-->
                            <!--</select>-->
                            <!--</div>-->
                        </div>
                    </form>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属系列</label>
                            <div class="layui-input-block">
                                <input type="text" id="productSeries" name="productSeries" autocomplete="off"
                                       placeholder="请输入商品所属系列" value="0" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品编号</label>
                            <div class="layui-input-block">
                                <input type="text" id="productNo" name="productNo" autocomplete="off" value="" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-block">
                                <input type="text" id="productName" name="productName" autocomplete="off" placeholder="请输入商品名称" value="" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品简称</label>
                            <div class="layui-input-block">
                                <input type="text" id="productShortName" name="productShortName" autocomplete="off"
                                       placeholder="请输入商品简称" value="" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品描述</label>
                            <div class="layui-input-block">
                                <input type="text" id="productDesc" name="productDesc" autocomplete="off"
                                       placeholder="请输入商品描述" value="" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品单位</label>
                            <div class="layui-input-block">
                                <input type="text" id="productUnit" name="productUnit" autocomplete="off"
                                       placeholder="请输入商品单位（个/箱/件）" value="" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">供货商</label>
                            <div class="layui-input-block">
                                <input type="text" id="supplier" name="supplier" autocomplete="off" placeholder="请输入供货商" value="" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品专区</label>
                            <div class="layui-input-block">
                                <select name="zhuanqu" id="zhuanqu" lay-verify="required" lay-filter="zhuanqu">
                                    <option value="0">请选择专区</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="grid-demo">
                        <form name="checkboxform" class="form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">是否上架</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" id="productUp" name="productUp" title="上架"
                                           lay-filter="checkbox">
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="grid-demo">
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品主图</label>
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="test02">上传主图</button>
                                    <input type="hidden" class="proImg" id="proImg" name="proImg" th:value="proImg"/>
                                    <div class="layui-upload-list  one-img">
                                        <img class="layui-upload-img" id="demo102" width="100px" height="100px">
                                        <p id="demo1Text02"></p>
                                    </div>
                                </div>
                            </div>
                                </div></div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">商品详情图</label>
                                <input type="hidden" class="proImg"  name="proImg" th:value="proImg001"/>
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn " id="addproDetailImgs" value="upDetails">
                                        上传详情图
                                    </button>
                                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                        图组预览图：
                                        <div class="layui-upload-list" id="detailContent2"></div>
                                        <p id="detailContents"></p>
                                    </blockquote>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn addproduct" lay-submit="savePro" lay-filter="demo1" onclick="saveAddProduct()">保存商品
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

</div>
</div>
</body>
<script th:src="@{layui/jquery.min.js}"></script>
<script th:src="@{layui/layui.js}"></script>
<script>
    var sjId;
    var rjId;
    var zhuanquval;
    loadyj();//查询一级分类
    $(document).ready(function () {
        layui.use('form', function () {
            var form = layui.form;
            form.on('select(selectyj)', function (data) {
                var yjId = data.value;
                var yjIds = parseInt(yjId);
                if (yjIds != 0) {
                    loadrj(yjId);
                }
                ////调用二级
            });
            // form.render();
            //
            form.on('select(selectrj)', function(data){
                     rjId=data.value;
                var yjId=data.value;
                // loadrj(yjId);
                // loadsj(rjId);
                // alert(rjId);
            //
            });
            //  form.render();
            //
            form.on('select(zhuanqu)', function(data){
                zhuanquval=data.value;
                alert("专区------"+zhuanquval);
            });
            form.render();
        });
        var date = new Date();
        var year = date.getFullYear();
        var productNo = Math.random().toString().substring(2);
        var str = year.toString() + productNo;
        $("#productNo").attr("value", str);
    });

    /*商品分类查询*/
    function loadyj() {
        var str = "";
        $.ajax({
            async: false,
            url: "/selectYJClassify",
            success: function (result) {
                var data = result;
                for (var index in data) {
                    str = str + "<option value='" + data[index].classId + "'>" + data[index].classifyName + "</option>";
                }
                $("#yj").append(str);
            }
        });
    }

    function loadrj(id) {
        var str = "";
        $.ajax({
            url: "/selectRJClassify?classId=" + id,
            success: function (result) {
                var data = result;
                $('#rj').empty();
                for (var index in data) {
                    str = str + "<option value='" + data[index].classId + "'>" + data[index].classifyName + "</option>";
                }
                $("#rj").append(str);
                layui.use('form', function () {
                    var form = layui.form;
                    form.render();
                })
            }
        })
    }

    //选择专区
    zhuanqu();
    function zhuanqu() {
        var str = "";
        var zhuanquName = new Array();
        zhuanquName[0]='零售专区';
        zhuanquName[1]='兑换专区';
        zhuanquName[2]='体验专区';
        zhuanquName[3]='活动专区';
        for (var i = 0; i < zhuanquName.length; i++) {
            str = str + "<option value='" + i + "'>" + zhuanquName[i] + "</option>";
        }
        $("#zhuanqu").append(str);
        layui.use('form', function () {
                        var form = layui.form;
                        form.render();
                    })

    }


    //复选框
    var productUp;
    layui.use('form', function () {
        var checkboxform = layui.form;
        checkboxform.on('checkbox(checkbox)', function (data) {
            console.log(data.elem.checked);
            productUp = data.elem.checked;
        })
    })

    var productNo = "";
    var productId = 0;

    //添加商品


    function saveAddProduct() {
        var activeSign=0;
        var a=parseInt(zhuanquval);
        switch (a) {
            case 0: activeSign=4;break;
            case 1: activeSign=5;break;
            case 2: activeSign=3;break;
            case 3: activeSign=7;break;
        }
alert("active:"+activeSign);

        if(rjId==null||rjId==""){
            layer.alert("请选择商品分类");
            return;}
        productNo = $('#productNo').val();
        var productName = $('#productName').val();
        var productDesc = $('#productDesc').val();
        var productUnit = $('#productUnit').val();
        var supplier = $('#supplier').val();
        var classifyId=rjId;
        var productSeries = $('#productSeries').val();
        var productShortName = $('#productShortName').val();
        // var upTime;
        // //上传时间
        // if (update == null || update == "") {
        //     layer.alert("请选择上传商品时间！");
        //     return;
        // } else {
        //     var year = data.year
        //     var month = data.month;
        //     var day = data.date;
        //     var hours = data.hours;
        //     var minutes = data.minutes;
        //     var seconds = data.seconds;
        //     upTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        // }
        //获取复选框的被选中状态
        if (productUp == true) {
            productUp = 'Y';//选中，‘1’表示上架
        } else {
            productUp = 'N';//未选中，‘0’表示不上架
        }
        $.ajax({
            type:'post',
            url: "/addProductData",
            data: {
                classId: classifyId,
                productNo: productNo,
                productName: productName,
                productDesc: productDesc,
                productUnit: productUnit,
                supplier: supplier,
                productSeries: productSeries,
                productShortName: productShortName,
                productUp: productUp,
                activeSign: activeSign
            },

            success: function (result) {
                alert('success');
                var data = result;
                productId = data.productId;
                if (data.productId != null) {
                    $('#productId').attr('value', data.productId);
                    layer.alert("商品" + productName + "添加成功！");
                } else {
                    layer.alert("商品" + productName + "添加失败！");
                }
            }
        })
    }

    //添加规格
    function saveAddGuiGe() {
        var productNo = $('#productNo').val();
        var productId = $('#productId').val();
        var proSize = $('#proSize').val();
        var proWeight = $('#proWeight').val();
        var proTiji = $('#proTiji').val();
        var proColor = $('#proColor').val();
        var otherGuige = $('#otherGuige').val();
        var proLength = $('#proLength').val();
        var proWidth = $('#proWidth').val();
        var proHeight = $('#proHeight').val();
        var proVolume = $('#proVolume').val();
        var guieName=$('#guige-name').val();
        //是否分单
        if (fenDan == true) {
            fenDan = '1';
        } else {
            fenDan = '0';
        }
        $.ajax({
            url: "/addProductGuige?productNo=" + productNo + "&proSize=" + proSize + "&proWeight=" + proWeight + "&proTiji=" + proTiji + "&proColor=" + proColor + "&otherGuige=" + otherGuige + "&fenDan=" + fenDan +
                "&proLength=" + proLength + "&proWidth=" + proWidth + "&proHeight=" + proHeight + "&productId=" + productId + "&proVolume=" + proVolume+"&guigeName="+guieName
            , success: function (result) {
                var data = result;
                if (data.guigeId != null && data.productId != "") {
                    $('#guigeId').attr('value', data.guigeId);
                    alert("商品" + $('#productName').val() + "规格添加成功！");
                } else {
                    alert("商品" + $('#productName').val() + "规格添加失败！");
                }

            }
        })

    }

//上传产品图片
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test02'
            // , url: '/addProductImgs'
            , url: 'http://localhost:8083//wap/upload'
            ,data:{
                proImg:function () {
                    var proImg=$('#proImg').val();
                    return proImg;
                }
            }
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo102').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {

                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                layer.msg('上传成功！');

            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
          ,size:1024
        });


    });

    //保存价格
    function saveAddPrice() {
        var productNo = $('#productNo').val();
        var proPrice = $('#proPrice').val();
        var proMarketPrice = $('#proMarketPrice').val();
        var proCost = $('#proCost').val();
        var opratorCost = $('#oprator_cost').val();
        var coupon = $('#coupon').val();
        var visitor = $('#visitor').val();//游客
        var huiYuan = $('#huiYuan').val();
        var dianZhu = $('#dianZhu').val();
        var YZDianZhu = $('#YZDianZhu').val();
        var otherRank = $('#otherRank').val();//其他等级
        var guigeId = $('#guigeId').val();//规格id
        var productId = $('#productId').val();
        alert("---------------" + guigeId);
        $.ajax({
            url: "/addProductPrice?productNo=" + productNo + "&proPrice=" + proPrice + "&proMarketPrice=" + proMarketPrice + "&proCost=" + proCost + "&opratorCost=" + opratorCost + "&coupon=" + coupon + "&huiYuan=" + huiYuan + "&dianZhu=" + dianZhu + "&YZDianZhu=" + YZDianZhu + "&visitor=" + visitor +
                "&otherRank=" + otherRank + "&guigeId=" + guigeId + "&productId=" + productId,
            success: function (result) {
                var priceRow = result;
            }
        })
    }
    //
    // var ue = UE.getEditor('editor');
    // ue.ready(function () {
    //     ue.setContent("这里编辑你的商品详情！");
    // })
    //
    // function getSave(productNo) {
    //     alert(UE.getEditor('editor').getContent());
    //     var content = UE.getEditor('editor').getContent();
    //     $.ajax({
    //         url: "/addProductDetils?content=" + content + "&productNo=" + productNo,
    //         success: function (result) {
    //             var rows = result;
    //             if (result > 0) {
    //                 alert("------");
    //             }
    //         }
    //     })
    // }

    var productNo = $('#productNo').val();
    $('.product-price').change(function () {
        var proPrice = $('#proPrice').val();
        var proMarketPrice = $('#proMarketPrice').val();
        var proCost = $('#proCost').val();
        var opratorCost = $('#oprator_cost').val();
        var coupon = $('#coupon').val();
        var visitor = $('#visitor').val();
        var huiYuan = $('#huiYuan').val();
        var dianZhu = $('#dianZhu').val();
        var YZDianZhu = $('#YZDianZhu').val();
        var minLiRun = $('#minLiRun').val();
        var ortherRank = $('#otherRank').val();
        // minLiRun=proPrice-proCost-opratorCost-coupon-visitor-huiYuan-dianZhu-YZDianZhu-ortherRank;
        minLiRun = proPrice - proCost - opratorCost - coupon - YZDianZhu;
        $('#minLiRun').attr("value", minLiRun);
        $('#minLiRun').css({'color': 'red'});
        if (minLiRun < 0) {
            alert("最低利润小于0，请检查输入是否正确！");
        }
    })

    // $("#proPrice").bind("keyup",function(){
    //     $("#proPrice").val($("#proPrice").val().replace(/[^\-?\d.]/g,''));
    // });

    //复选框
    var fenDan;
    layui.use('form', function () {
        var fenDanform = layui.form;
        fenDanform.on('checkbox(fenDan)', function (data) {
            console.log(data.elem.checked);
            fenDan = data.elem.checked;
        })
    })


    //上传规格图片
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#guigeImg'
            , url: '/addGuiGeImg'
            ,data:{
                proImg:function () {
                    var proImg=$('#proImg').val();
                    return proImg;
                }
            }
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#guigeImg_img').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.msg != '1') {
                    return layer.msg('上传失败!');
                }
                //上传成功
                layer.msg('上传成功！');
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            ,size:1024
        });



        //规格多图片上传
        upload.render({
            elem: '#addGuiGeImgGroup'
            , url: '/addGuiGeImgGroup'
            // , data: {
            //     productNo: function () {
            //         var productNo = $('#productNo').val();
            //         return productNo;
            //     },
            //     upId: function () {
            //         return $('#test2').val();
            //     }
            //
            // }
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#guigeImgGroup').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="height: 100px">')
                });
            }
            , done: function (res) {

                        layer.alert("上传成功！");

            }
            ,size:2048
        })


        //上传详情图
        upload.render({
            elem: '#addproDetailImgs'
            , url: '/addproDetailImgs'
            , method: 'post'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#detailContent2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="height: 100px">')
                });
            }
            , done: function (res) {
                $('#detailContents').text("上传成功！");
                $('#detailContents').css({'color': 'blue'});
            }

        })


    });


</script>
</html>

